<template>
    <div class="play-page" v-show="show">
        <div class="movie-top">
            <div class="bnt">
              <el-button @click="closeWin" type="primary" class="btn" size="mini">关闭</el-button>
            </div>
            <h3 class="main-title"><span>{{title}}</span></h3>
            <div class="go-box">
                <div class="home iconfont iconfangzi" @click="goPage('/index')">首页</div>
                <div class="center iconfont iconxuexi" @click="goPage('/home')">学习中心</div>
            </div>
        </div>
        <div class="movie-content">
            <div class="left see-video animated">
                <video-player class="vjs-custom-skin videoPlay vjs-big-play-centered" ref="videoPlayer" :options="playerOptions" :playsinline="true" @play="onPlayerPlay($event)" @pause="onPlayerPause($event)" @ended="onPlayerEnded($event)" @loadeddata="onPlayerLoadeddata($event)" @waiting="onPlayerWaiting($event)" @playing="onPlayerPlaying($event)" @timeupdate="onPlayerTimeupdate($event)" @canplay="onPlayerCanplay($event)" @canplaythrough="onPlayerCanplaythrough($event)" @ready="playerReadied" @statechanged="playerStateChanged($event)">
                </video-player>
            </div>
            <div class="right animated">
                <div class="see-list" >
                    <h3 class="list-title">课程章节列表</h3>
                    <div class="list-main ">
                      <div class="bar-right" v-show="shou">
                        <i class="el-icon-arrow-right"></i>
                      </div>
                      <div class="bar-left" v-show="!shou">
                        <i class="el-icon-arrow-left"></i>
                      </div>
                      <el-scrollbar ref="elscrollbar" class="list-all">
                        <div class="list-item"  v-for="(item,index) in List"  :class="item.active?'item-active':''" >
                          <div class="lock" v-show="!item.studyFlag">
                            <img src="../static/image/lock.png">
                          </div>
                          <!-- 视频 -->
                          <div v-show="item.detailType == '1'" @click="play(index,true)" class="nolock">
                            <img v-show="item.active" src="../assets/image/active.gif"/>
                            <img v-show="!item.active" src="../assets/image/no-active.png"/>
                            <span class="name" :title="item.title">{{item.title}}</span>
                            <!-- <span class="time">{{item.videoTimeMinute}} 分钟</span> -->
                            <i class="el-icon-video-play play"></i>
                          </div>
                          <!-- 测试 -->
                          <div v-show="item.detailType == '2'" @click="goTest(item)" class="nolock">
                            <img v-show="item.active" src="../assets/image/active.gif"/>
                            <img v-show="!item.active" src="../assets/image/no-active.png"/>
                            <span class="name" :title="item.paperTitles">{{item.paperTitles}}</span>
                            <div style="width: 50px;
    text-align: center;
    height: 25px;
    background-color: rgb(0, 118, 202);
    color: white;
    line-height: 25px;
    border-radius: 4px;">测试</div>
                          </div>
                          <!-- <div class="bofang" style="background:#ff6c62;" v-show="item.detailType=='2'"
                            @click="goTest(item1)" :class="{'noClick':!item.studyFlag}">开始测试</div> -->

                          <!-- <i class="iconfont" :class="item.style"></i> -->
                        </div>
                      </el-scrollbar>
                    </div>

                </div>
            </div>
        </div>

    </div>
</template>

<script>
import'../assets/css/style.less'
import'../assets/css/fonts/iconfont.css'
import Cookies from 'js-cookie'
import {
    Notification,
    Message,
  } from 'element-ui';

export default {
    components: {

    },
    data(){
        return{
            shou:true,
            show:false,
            playerOptions: {
                // aspectRatio: '16:9',
                fluid:false,   // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
                // height: '600px',
                // width: document.documentElement.clientWidth,
                preload:'auto',
                muted: true,
                language: 'zh-CN',
                sourceOrder:true,
                notSupportedMessage: '此视频暂无法播放!', // 无法播放时显示的信息
                playbackRates: [0.7, 1.0, 1.5, 2.0],
                sources: [{
                    type: "video/mp4",
                    // mp4
                    src: "http://vjs.zencdn.net/v/oceans.mp4",
                    // webm
                    // src: "https://cdn.theguardian.tv/webM/2015/07/20/150716YesMen_synd_768k_vp8.webm"
                }],
                poster: "",
                controlBar: {
                    volumePanel: {
                        inline: false //音量调节是否水平
                    },
                    currentTimeDisplay: true, //当前播放位置
                    timeDivider: true, // 时间分割线
                    durationDisplay: true, // 总时间
                    progressControl: true, // 进度条
                    remainingTimeDisplay: true, // 剩余时间
                    fullscreenToggle: true // 全屏按钮
              },
            },
            player:{},
            List:[],
            List1:[],
            wet:{},
            title:'',
            shangchuan:true,
            start:false,
            type:'',
            privateId:'',
            courseHours:0,
            activeIndex:0,
            courseId:'',
            target:'',
            blur:false,
            playing:false,
            isHand:false,
            photoUrl:'',
        }
    },
    created(){
       // var vm = this;
       //    //页面初始获取高宽比，使播放器铺满窗口（视频还保持元尺寸，所以会出现黑边，这也是个问题），如果不需要铺满去电这个即可。使用fluid: true使用原视频的大小
       //    vm.playerOptions.aspectRatio =
       //      document.body.clientWidth +
       //      ':' +
       //      document.body.clientHeight;
       //      console.log(vm.playerOptions.aspectRatio);
    },
    mounted(){
        this.show = true;
        $(".play-page").parents("div").css("height","100%");

        var w = $(window).width();
        $(window).resize(function(){
            w = $(window).width()
            console.log(w,22)
            //窗口变化时，先关闭右侧列表栏，然后重新打开
            // $(".right").animate( { right: "-370px",width: "0%" }, 300,function(){
            //   that.shou = false;
            // });
            // $(".left").animate( { width: "100%" }, 300);


        })
        $(function(){
          $(".bar-right").click(function(){
            console.log(w,333)
              $(".right").animate( { right: "-370px",width: "0%" }, 300,function(){
                that.shou = false;
              });
              $(".left").animate( { width: "100%" }, 300);
          })

          $(".bar-left").click(function(){
            console.log(w,444)
              $(".right").animate( { right: "0",width: "370px" }, 300,function(){
                that.shou = true;
              });
              $(".left").animate( { width: (w-370).toString()+"px" }, 300);
          })
        })

         $(document).ready(function(){
            $('#video').bind('contextmenu',function() { return false; });
        });

        if(Cookies.get("token")){
            this.getData();
            this.getWet();
        }
        else{
          this.$router.push("/login");
        }

        $(".vjs-control-bar").append("<div class='zhe'></div>")
        let that = this;
        //鼠标移出后点击按键会暂停视频播放
        // this.$nextTick(()=>{

        //     window.onblur = function () {
        //         that.blur = true;
        //         if(that.playing){
        //             that.player.pause();
        //             that.isHand = true;
        //         }

        //     }
        //     window.onfocus = function(){
        //         console.log(that.blur)
        //         if(that.blur && that.isHand){
        //             that.isHand = false;
        //             that.blur = false;
        //             that.player.play();
        //             that.playing = true;
        //         }

        //     }
        // })
    },
    head() {
        return {
          title: '观看视频',
        }
    },
    methods:{
      goTest(item) {
        if (!Cookies.get("token")) {
          this.$router.push("/login");
          return;
        }
        else{
          this.$confirm('是否进入测试, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            var routeData = this.$router.resolve({
              path: '/paper/' + this.kechengid + '/' + item.educationPaperList[0].id + "/" + item.did
            });
            window.open(routeData.href, '_blank');
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消'
            });
          });

         }
      },
      //关闭当前窗口
      closeWin(){
        if (navigator.userAgent.indexOf("MSIE") > 0) {
        if (navigator.userAgent.indexOf("MSIE 6.0") > 0) {
        window.opener = null; window.close();
        }else {
        window.open('', '_top'); window.top.close();
        }
        }else if (navigator.userAgent.indexOf("Firefox") > 0) {
        window.location.href = 'about:blank ';
        //火狐默认状态非window.open的页面window.close是无效的
        //window.history.go(-2);
        }else {
        window.opener = null;
        window.open('', '_self', '');
        window.close();
        }
      },
        getWet(){
            let that = this;
            this.$axios.$get("/f/index")
            .then(function (response) {
                that.wet = response.data.webSiteSetings;

            })
            .catch(function (error) {
                  // handle error
                  console.log(error);
            })
        },
        select(index){
            this.menuList.forEach((item,i)=>{
                if(i==index){
                    item.addClass = "menuActive";
                    this.$router.push(item.path);
                }
                else{
                    item.addClass = ""
                }
            })
        },
        getData(){
          var that = this;
          this.$axios.$post("/f/course?id="+this.$route.params.id)
          .then(function (response) {
            let data = Object.assign(response.data.course,response.data.course.courseInfo)
            that.title = data.courseName;
            that.type = data.courseType;
            that.privateId = data.privateId;
            that.courseId = data.courseId;
            that.photoUrl = data.photo;
            if(Number(data.presentPrice)==0){
                that.target = "0";
            }
            else{
                that.target = "1";
            }
            //是否禁用拖动
            if (data.dragFlag == '0') { // 判断条件：等于0不可以拖动
              let control = document.querySelectorAll('.vjs-progress-control')
              control.forEach(item => {
                item.classList.add('pointer')
              })
            }
            //that.studyId = response.data.studyId;
            var list = data.educationCourseDbDetailsList;
            var len1 = list.length;
            let arr = [];
            for(var i=0;i<len1;i++){
                if(list[i].detailType=='1'){
                    list[i].addClass = "";
                    list[i].style1 = "";
                    list[i].url = list[i].videoCover;
                      //list[i].time = Math.ceil(Number(list[i].duration)/60)
                    let itemId = list[i].id;
                    list[i] = Object.assign(list[i],list[i].educationVideo);
                    list[i].id = itemId;
                    list[i].videoTimeMinute = Math.floor((list[i].videoTime)/60);
                    arr.push(list[i])
                }else if(list[i].detailType=='2'){
                    //记录后台测试是否完成
                    list[i].isFinish = list[i].studyFlag;
                    list[i].addClass = "";
                    list[i].style1 = "";
                    let itemId = list[i].id;
                    list[i].id = itemId;
                    arr.push(list[i])
                }
            }
            console.log(arr,222)
            that.List1 = arr;
            if(that.$route.params.id1!="0"){
              var len = that.List1.length;
              for(var i=0;i<len;i++){
                if(that.$route.params.id1==that.List1[i].id){
                  var a = i;
                  that.activeIndex = a;
                  setTimeout(()=>{
                    that.play(a,false);
                  },100)
                }
              }
            }
            else{
              var len = that.List1.length;
              for(var i=0;i<len;i++){
                that.List1[i].addClass="";
              }
              setTimeout(()=>{
                that.play(0,false);
              },100)
            }
          })
          .catch(function (error) {
            // handle error
            console.log(error);
          })
        },
        goPlay(item,index){
            this.List.forEach((item1,i)=>{
                if(i==index && item1.studyFlag){
                    item1.addClass = "active-bofang"
                    this.play(i,false);
                }
                else{
                    item1.addClass = ""
                }
            })

        },
        goPage(url){
            this.$router.push(url);
        },
        //自动播放
        play(index,isClick){
          // if(index == this.activeIndex) return
          //将activeIndex置为播放的第几个视频
          this.activeIndex = index;

          var len = this.List1.length;
          var List = this.List1;
          let arr1 = []
          for(var i=0;i<len;i++){
            if(index==i){
               List[i].addClass="active-bofang";
               this.videoCourseDetailId = List[i].dId;
               if(!this.videoCourseDetailId){
                 this.videoCourseDetailId = List[i].did;
               }
               if(isClick){
                 this.courseHours = 0;
               }else{
                 this.courseHours = List[i].userCurrentTime;
               }
               // this.courseHours = List[i].userCurrentTime;
               this.zongTime = List[i].videoTime;
               this.$nextTick()
               List[i].style1="bg1";
               List[i].active = true
            }else{
              List[i].addClass="";
              List[i].style1="";
              List[i].active = false
            }
            arr1.push(List[i])
          }
          this.List = arr1;
          if(List[index].detailType == '1'){
            setTimeout(()=>{
              this.player.play();
              this.player.currentTime(this.courseHours);
            },800)

            this.player = this.$refs.videoPlayer.player;
            // this.player.src(this.$axios.defaults.baseURL + this.List[index].videoUrl);
            this.player.src(this.List[index].videoUrl);
            this.playing = true;
            this.isactive = true;
          }else{
            //如果测试已经完成则直接跳过，开始播放下一个视频
            //如果是测试则提醒打开页面进行测试
            //需要将下一个章节变为可观看或测试
              List[index+1].studyFlag = true
              if(!List[index].isFinish){
                this.goTest(List[index])
              }else{
                this.play(index+1,false)
              }
          }


          // this.player = this.$refs.videoPlayer.player;
          // this.player.src(this.List[index].videoUrl);
          // this.playing = true;
          // this.isactive = true;
        },
        onPlayerPlay(player) {
            this.playing = true;
        },
        onPlayerPause(player) {
            this.playing = false;
            // var num = this.player.currentTime();
            // var b = Math.floor(num);
            // let c = (Math.floor(this.player.currentTime()))%5;
            // this.addStudyCenter(b,c);
            // this.shangchuan = false;
            // setTimeout(()=>{
            //   this.shangchuan = true;
            // },5*1000)
            // this.shangchuan = false;
            // if(this.activeIndex<(this.List.length-1)){
            //     this.activeIndex = this.activeIndex+1;
            //     this.List[this.activeIndex].studyFlag = true;
            //     this.play(this.activeIndex);
            // }

        },
        onPlayerEnded(player) {
            this.playing = false;
            var num = this.player.currentTime();
            var b = Math.floor(num);
            let c = (Math.floor(this.player.currentTime()))%5;
            this.addStudyCenter(b,c);
            this.shangchuan = false;
            if(this.activeIndex<(this.List.length-1)){
                this.activeIndex = this.activeIndex+1;
                this.List[this.activeIndex].studyFlag = true;
                this.play(this.activeIndex,false);
            }

        },
        onPlayerLoadeddata(player) {
        // console.log('player Loadeddata!', player)
        },
        onPlayerWaiting(player) {
        // console.log('player Waiting!', player)
        },
        onPlayerPlaying(player) {
        // console.log('player Playing!', player)
        },
        onPlayerTimeupdate(player) {
        // console.log('player Timeupdate!', player.currentTime())
        },
        onPlayerCanplay(player) {
        // console.log('player Canplay!', player)
        },
        onPlayerCanplaythrough(player) {
        // console.log('player Canplaythrough!', player)
        },
        // or listen state event
        playerStateChanged(playerCurrentState) {
            if(this.isactive == true){
              // console.log(this.player.currentTime(),this.courseHours)
                // if(Cookies.get("seeType")=="no" && this.player.currentTime()>Number(Cookies.get("time"))){
                //   this.player.pause();
                //   if(!this.tan){
                //     this.tan = true;
                //     this.$confirm('试看时间已到, 请购买课程继续观看?', '提示', {
                //       confirmButtonText: '确定',
                //       showCancelButton:false,
                //       showClose:false,
                //       closeOnClickModal:false,
                //       type: 'warning'
                //     }).then(() => {
                //       if((this.content.courseVipType=="2" || this.content.courseVipType=="1") && !this.vip){
                //         this.$router.push("/main/vip");
                //         return;
                //       }
                //       this.$router.push("/main/orderPage/"+this.$route.params.id);
                //       return;
                //     }).catch(() => {

                //     });
                //   }
                // }
                //this.zongTime = Math.floor(this.player.currentTime()+this.player.remainingTime());
                var courseHours = 0;
                if( this.courseHours==0 ){
                  var num = this.player.currentTime();
                  var b = Math.floor(num);
                  courseHours = b;
                }
                else{
                  var time = null;
                  var num = this.player.currentTime();
                  var b = Math.floor(num);
                  time = b;
                  if(time>=this.courseHours){
                    courseHours = time;
                  }
                  else{
                    courseHours = this.courseHours;
                  }
                }
                if(this.shangchuan==true){
                  if(Cookies.get("token")){
                    this.shangchuan = false;
                    if(this.start){
                        // if(courseHours%5==0){
                        //     this.addStudyCenter(courseHours,5);
                        // }
                        // else{
                        //     this.addStudyCenter(courseHours,courseHours%5);
                        // }
                        this.addStudyCenter(courseHours,5);

                    }
                    else{
                        this.addStudyCenter(courseHours,0);
                    }
                    setTimeout(()=>{
                        this.shangchuan = true;
                        this.start = true;
                    },5*1000)
                  }
                }
              }

        // console.log('player current update state', playerCurrentState)
        },
        addStudyCenter(a,b){
          var that = this;
          this.$axios.$post('/f/saveUserVideoRecord?courseId='+this.courseId+'&courseType='+this.type+'&currentTime='+a+'&detailId='+this.videoCourseDetailId+'&rootCourseId='+this.privateId+'&studyTime='+b+'&target='+this.target)
          .then(function (response) {

          })
          .catch(function (error) {
            // handle error
            console.log(error);
          })
        },
        // player is ready
        playerReadied(player) {
            if(this.shangchuan==false){
              this.shangchuan = true;
            }
            // seek to 10s
            console.log('example player 1 readied', player)
            //player.currentTime()
            // console.log('example 01: the player is readied', player)
        }
    }
}
</script>

<style lang="less" scoped>

// 自定义禁止拖动进度条
/deep/ .pointer{
  pointer-events: none !important;
}
.play-page {
    width:100%;
    height:100%;
    .movie-content{
        width:100%;
        height:calc(100% - 50px);
        display:flex;
        padding: 10px 0;
        .left{
            width:calc(100% - 370px);
            height:100%;
            float:left;
            position: relative;
            .videoPlay{
                width:100%;
                height:100%;
                // height:100%;
                // padding: 20px;
                display: flex;
                align-items: center;
                background-color: #000000;
                // width: 100%;
                //       height: 100%;
                      position: absolute;
                      // object-fit: fill;
                /deep/.video-js{
                    // height:100%;
                    // padding:0 !important;
                    position: relative;
                    // height:100% !important;
                    width: 100% !important;
                    height: 100%
                }
                // /deep/ .video-js .vjs-tech {
                //   object-fit: fill;
                // }
                // /deep/ .vjs-poster {
                //   background-size: cover;
                // }
                #vjs_video_3{
                    width:100%;
                    height:100%;
                }
                .vjs-control{
                    float:left;
                }
                .vjs-control.vjs-button{
                    width:3rem;

                }
                .vjs-control-bar{
                    display:block\0;/* ie 8/9 */
                    .zhe{
                        position:absolute;
                        width: calc(100% - 21rem);
                        top:0;
                        right:6rem;
                        height:100%;
                    }
                }
                .vjs-progress-control{
                    width:calc(100% - 21rem);
                    .vjs-slider-horizontal{
                        position:absolute;
                        left:0;
                        top:50%;
                        transform:translateY(-50%);
                        width:calc(100% - 20px);
                    }
                }
                .vjs-time-control{
                    float:left;/* ie 8/9 */
                    width:3rem;
                }
                .vjs-time-control.vjs-time-divider{
                    width:1rem;
                }
                .vjs-control.vjs-volume-panel-vertical{
                    width:4rem;
                }
            }
        }
        .right{
            width:370px;
            height:100%;
            float:left;

            background:#fff;
            box-sizing:border-box;
            border-left:1px solid #e2e2e2;
            .see-list{
          width:100%;
          height:100%;
          background:#14191e;
          box-sizing:border-box;
          // border-left:1px solid #f4f4f4;
          float:left;
          // .list-item:hover{
          //   background:#14191e;
          //   color:#fff !important;
          //   span{
          //     color:#fff !important;
          //   }
          // }

          .list-item{
            width:calc(100% - 10px);
            // height:140px;
            margin:5px;
            padding:10px;
            background:#ffffff;
            border: 1px solid #e6e9eb;
            border-radius: 12px;
            position:relative;
            cursor:pointer;
            color: #0076ca;
            .nolock{
              width: 100%;
              height: 100%;
              display: flex;
              justify-content: space-between;
              align-items: center;
                        img{
                           height: 25px;
                         }
                         .iconbofang{
                           position:absolute;
                           width:40px;
                           height:20px;
                           background:#fff;
                           border-radius:10px;
                           display:block;
                           line-height:20px;
                           text-align:center;
                           color:#3f83f2;
                           font-size:14px;
                           top:20px;
                           right:20px;
                         }
                         .play{
                           color: #000000;
                           font-size:25px;
                         }
                         .name{
                           display: inline-block;
                           text-align: center;
                           // width:calc(100% - 195px);
                           width:240px;
                           line-height:25px;
                           font-size:16px;
                           color:#0076ca;
                           height:25px;
                           // display: -webkit-box;
                           /* autoprefixer: off*/
                           -webkit-box-orient: vertical;
                           /* autoprefixer: on*/
                           -webkit-line-clamp: 3;
                           overflow: hidden;
                           white-space: nowrap;
                           text-overflow: ellipsis;
                           -o-text-overflow:ellipsis;
                         }
                         .time{
                           position:absolute;
                           line-height:25px;
                           right:15px;
                           bottom:15px;
                           font-size:14px;
                           color:#777777;
                         }
            }
            .lock{
              cursor: default;
              width:100%;
              // float:left;
              height:100%;
              top: 0;
              left: 0;
              opacity: 0.8;
              background: #a3a3a3;
              position: absolute;
              display: flex;
              align-content: stretch;
              justify-content: center;
              align-items: center;
              img{
                width: 30px;
                height: 30px;
              }
            }

          }
          .bg1{
            background:#3a7bf3;
            color:#fff !important;
            span{
              color:#fff !important;
            }
          }
          .list-main{
            width:100%;
            height:calc(100% - 60px);
            position:relative;
            background:#ffffff;
            .bar-right{
                  position: absolute;
                  background: #0f1419;
                  border-radius: 0 12px 12px 0;
                  width: 16px;
                  height: 56px;
                  left: 0;
                  top: calc(50% - 28px);
                  display: -webkit-box;
                  display: -ms-flexbox;
                  display: flex;
                  -webkit-box-align: center;
                  -ms-flex-align: center;
                  align-items: center;
                  -webkit-box-pack: center;
                  -ms-flex-pack: center;
                  justify-content: center;
                  z-index: 2;
                  cursor: pointer;
                  i{
                    color: #ffffff;
                  }
            }
            .bar-left{
                  position: absolute;
                  background: #0f1419;
                  border-radius: 12px 0 0 12px;
                  width: 16px;
                  height: 56px;
                  left: -16px;
                  top: calc(50% - 28px);
                  display: -webkit-box;
                  display: -ms-flexbox;
                  display: flex;
                  -webkit-box-align: center;
                  -ms-flex-align: center;
                  align-items: center;
                  -webkit-box-pack: center;
                  -ms-flex-pack: center;
                  justify-content: center;
                  z-index: 2;
                  cursor: pointer;
                  i{
                    color: #ffffff;
                  }
            }
            .list-all{
              width:100%;
              height:100%;
              .item-active{
                // box-shadow: 2px 2px 10px #409eff;
                // background: #0076ca !important;
                border: 1px solid #0076ca;
                color: #0076ca !important;
                background-color: #e0e0e0;
              }
            }
            .iconshouqi_m,.iconshouqi_m-copy{
              width:20px;
              height:80px;
              left:-20px;
              top:50%;
              cursor:pointer;
              transform:translateY(-50%);
              position:absolute;
              background:rgba(0,0,0,0.3);
              z-index:9999;
              line-height:80px;
              text-align:center;
              font-size:16px;
              border-radius:20px 0 0 20px;
              color:#fff;
              display:block;
            }
            .el-scrollbar__wrap{
              overflow-x:hidden;
            }
            .el-scrollbar__thumb {
                background: #2b2b2b;
            }
          }
          .list-title{
            width:100%;
            // padding:0 20px;
            text-align:center;
            line-height:60px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            height:60px;
            font-size:20px;
            color:#3a7bf3;
            box-sizing:border-box;
            border-bottom:1px solid #f4f4f4;
            background:#ffffff;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }
            .video-list{
                width:100%;
                height:calc(100% - 50px);
                verflow: hidden;
                .elscrollbar{
                    width:100%;
                    height:100%;
                    box-sizing:border-box;
                    padding-top:15px ;
                    .el-scrollbar__wrap{

                    }
                    .el-scrollbar__thumb{
                        background-color: rgba(56, 57, 58, 0.5);
                    }
                    .video-item{
                        width:369px;

                        padding:0 15px;
                        height:40px;
                        display:flex;
                        align-items:center;
                        position:relative;
                        box-sizing:border-box;
                        .iconbofang{
                            font-size:14px;
                            color:#696969;
                            cursor:pointer;
                        }
                        .iconbofang:before{
                            margin-right:20px;
                            font-size:16px;
                        }
                        .active-bofang{
                            color:#000;
                        }
                        .iconfont:hover{
                            color:#000;
                        }
                        .iconsuo1,.iconjiesuo{
                            position:absolute;
                            right:20px;
                            top:50%;
                            transform:translateY(-50%);
                            font-size:16px;
                            color:#848181;
                        }
                        .iconjiesuo{
                            color:#0f83fb;
                        }
                    }
                }
            }
            .video-title{
                position:relative;
                line-height:50px;
                font-size:16px;
                color:#333;
                height:50px;
                width:100px;
                text-align:center;
                margin:0 auto;
            }
            .video-title:after{
                content:'';
                width:100%;
                height:2px;
                left:0;
                position:absolute;
                bottom:0;
                background:#409eff;
            }
        }
    }
    .movie-top{
        width:100%;
        box-sizing:border-box;
        padding:0 30px;
        height:50px;
        background:#fff;
        border-bottom:1px solid #e2e2e2;
        position:relative;
        .bnt{
          position:absolute;
          left:30px;
          height:30px;
          top:10px;
          .home{
              width:80px;
              height:30px;
              line-height:30px;
              text-align:center;
              font-size:14px;
              background:#409eff;
              color:#ffffff;
              border-radius:3px;
              margin-right:10px;
              float:left;
              cursor:pointer;
          }
        }
        .go-box{
            position:absolute;
            right:30px;
            height:30px;
            top:10px;
            .home{
                width:80px;
                height:30px;
                line-height:30px;
                text-align:center;
                font-size:14px;
                background:#409eff;
                color:#ffffff;
                border-radius:3px;
                margin-right:10px;
                float:left;
                cursor:pointer;
            }
            .center{
                width:100px;
                height:30px;
                line-height:30px;
                text-align:center;
                font-size:14px;
                background:#67c23a;
                color:#ffffff;
                border-radius:3px;
                float:left;
                cursor:pointer;
            }
            .iconfont:before{
                font-size:18px;
                margin-right:5px;
            }
        }
    }
    .main-title{
        width:100%;
        line-height:50px;
        box-sizing:border-box;
        height:50px;
        font-size:24px;
        color:#17a2b8;
        text-shadow: 0 1px 3px rgba(0,0,0,0.2);
        padding-left: 100px;
        span{
            font-size:24px;
            font-weight:500;
        }
    }
}
</style>
